import { useNavigate } from 'react-router-dom'
import { NavBar } from 'antd-mobile'
import ArticleItem from '@/pages/Home/ArticleItem'
import styles from './index.module.scss'
import { ArticleItemType } from '@/type'

const Result = () => {
  const navigate = useNavigate()

  // 渲染结果列表

  const renderArticleList = () => {
    const list = [
      {
        art_id: '8058',
        aut_id: '1111',
        aut_name: '黑马先锋',
        comm_count: 2,
        cover: {
          type: 1,
          images: ['http://toutiao.itheima.net/resources/images/27.jpg'],
        },
        is_top: 0,
        pubdate: '2019-03-11 09:00:00',
        title: '记一次 Node.js 源码分析',
      },
    ] as ArticleItemType[]

    return list.map((item) => {
      return (
        <div key={item.art_id} className="article-item">
          <ArticleItem type={item.cover.type} articleData={item} />
        </div>
      )
    })
  }

  return (
    <div className={styles.root}>
      <NavBar onBack={() => navigate(-1)}>搜索结果</NavBar>
      <div className="article-list">{renderArticleList()}</div>
    </div>
  )
}

export default Result
